<template>
	<view class="conent" style="height: 100vh;background-color: aliceblue;">
		<!-- 右侧图标 -->
		<view class="iconhead">
			<view class="">
				<image style="width: 70rpx;" src="../../static/my/设置-系统设置.png" mode="widthFix"></image>
			</view>
			<view>
				<image style="width: 70rpx;" src="../../static/my/消息.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 头部头像区域 -->
		<view   class="imghead whitebox" style="margin-top: 10px;">
			<!-- 头像区域 -->
			<view @click.stop="touch"  class="imgbox">
				<view class="circleimg1">
					<image style="border-radius: 50%; width: 200rpx;" :src="baseUrl+info.photo" mode="widthFix"></image>
				</view>
				<view >
					<uni-title type="h2" :title="info.username"></uni-title>
					<view>
						
					</view>
				</view>
			</view>
			<!--  -->
			<!-- 学习计数 -->
			<view class="countbox">
				<view @click="opendate()" class="counttext">
					<view>学习天数</view>
					<uni-title type="h4" title="29"></uni-title>
				</view>
				<view @click="xun()" class="counttext">
					<view>勋章数</view>
					<uni-title type="h4" title="10"></uni-title>
				</view>
			</view>
		</view>
		<!-- 我的学习 -->
		<view class="whitebox">
			<uni-title style="margin-left: 10px;" type="h2" title="我的学习"></uni-title>
			<view class="iconflex">
				<view v-for="(item,index) in features.slice(0,4)" :key="index">
					<view class="iconbox">
						<image style="width: 100rpx;" :src="baseUrl+item.featureIcon" mode="widthFix"></image>
						<view class="" style="text-align: center;">{{item.featureTitle}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 设置客服区域 -->
		<view class="whitebox">
			<uni-title style="margin-left: 10px;" type="h2" title="更多"></uni-title>
			<view class="iconflex">
				<view v-for="(item,index) in features.slice(4,8)" :key="index">
					<view class="iconbox">
						<image style="width: 100rpx;" :src="baseUrl+item.featureIcon" mode="widthFix"></image>
						<view class="" style="text-align: center;">{{item.featureTitle}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:'http://127.0.0.1:8081/',
				features:[],
				data:{
					username:'admin',
					password:"123456"
				},
				info:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			async getlist(){
				const data=await this.$request.getfeatures()
				this.features=data.data.data
				console.log(this.features)
				const data2=await this.$request.login(this.data)
				this.info=data2.data.data
				console.log(this.info)
			},
			opendate(){
			uni.navigateTo({
				url:'/pages/my/calender'
			})
					},
					xun(){
						uni.navigateTo({
							url:'/pages/my/xun'
						})
					},
			touch(){
				uni.navigateTo({
					url:"/pages/my/myinfo"
				})
			}
			
		}
	}
</script>

<style>
	.iconflex{
		margin: auto;
		display: flex;
		width: 90%;
		flex-wrap: wrap;
		justify-content: center; 
	}
	.iconbox{
		width: 150rpx;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
	}
	.counttext{
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
	}
	.countbox{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.circleimg{
		height: 170rpx;
		width: 170rpx;
		border-radius: 100%;
		overflow: hidden;
		margin-right: 20px;
	}
	.imgbox{
	
		display: flex;
		justify-content: center;
	}
	.whitebox{
		width: 96%;
		border-radius: 10px;
		background-color: white;
		margin: 10px auto;
	}
	.iconhead{
		display: flex;
	
		justify-content: flex-end;
	}
.conent{
	width: 98%;
	margin: 0px auto;
}
</style>
